---

13. RAD Layout Editing

CodeWarrior's rapid application development (RAD) tools include a Layout editor, Component Palette, Component Catalog window, and Object Inspector. These tools help you visually build an application's user interface. This chapter describes the four tools and their use with RAD.

The following topics are discussed:

• Layout Editor
• Layout Wizards
• Component Palette
• Component Catalog window
• Object Inspector

The Layout editor displays the graphical user interface for your RAD project. The IDE uses a RAD plug-in architecture to display the Layout editor's environment. For example, when you develop a Java application with the RAD tools, the IDE uses the Java plug-in to draw the layout on the screen.

This section describes the following:

• Creating a Layout
• Modifying a Layout

When you create a new layout for your RAD project, the layout's default state does not contain any user interface components. You use the Component Catalog window or the Component Palette to place user interface components in the layout. As you build the application's interface, the RAD tools automatically generate source code to create that interface at runtime.

Each RAD design can have several layouts. However, to maintain peak performance, you should limit the number of layouts you use in a single project. If your project includes more than 30 layouts, you should consider other ways to organize those layouts. Many of the suggestions in "Strategy for Creating Complex Projects" on page 94 apply when creating multiple layouts for a single RAD project.

If you want to add a new layout to an open project in the IDE, choose New from the File menu. In the New window, click the Object tab to display a list of object wizards, as shown in Figure 13.1.

Choose a wizard that corresponds to the layout you wish to create:

• Java Frame Wizard-helps you create a new layout frame for a Java RAD project. The wizard asks for information about the frame's class, package, and location.

When you click OK, the wizard guides you through the layout-creation process. After you configure the new layout's settings in the wizard, click Finish to add the layout to the project and open a new layout window. For detailed information about the available layout wizards, see "Layout Wizards" on page 526.

To modify an existing layout, you use the Layout editor in conjunction with the Component Palette, Component Catalog window, and Object Inspector. You select components from the Component Catalog window or the Component Palette and then place those components in the layout window. You manipulate the components in the layout as you would manipulate graphic objects in a drawing application.

A layout is modified in the following ways:

• Creating objects
• Manipulating objects
• Examining objects
• Removing objects
• Layout editor contextual menu

The RAD tools access available project components from the current catalog. The Component Palette and Component Catalog window give you two convenient ways to access the components.

If you use the Component Catalog window, you drag components to the layout window to create new interface objects. If you use the Component Palette, you click the button representing the component you want to add, and then you drag a cursor in the layout window to place that component in the layout.

For more information about the Component Palette, see "Component Palette" on page 528. To learn more about the Component Catalog window, see "Component Catalog window" on page 532.

To move an object in a layout, select it in the layout window. A selected object is shown in Figure 13.2. The heavy border around the object indicates that it is currently selected. Drag selected objects to move them to a new positions in the layout window. Alternatively, use the arrow keys on your keyboard to move the selected objects. To resize or reshape an object, drag one of its resize handles in the desired direction. A heavy outline is displayed as you drag the resize handle. This outline represents the final shape of the object when you release the resize handle.

You can select multiple objects in two different ways:

• Shift-click each object that you want to add to your selection. A heavy border is displayed around all selected objects. If you decide against an object in the selection, Shift-click that object again.
• Draw a marquee around a group of objects to quickly select them, as shown in Figure 13.3 on page 524. Position the cursor near the group of objects you want to select, then drag the cursor to display a marquee. Release the marquee when it encloses the objects you want to select. To add additional objects to the selection, position the cursor near the additional objects and then press the Shift key while dragging the cursor. This action displays another marquee. Release the marquee when it encloses the additional objects.

After you place objects in the layout, you can edit the various properties that characterize each object, as well as the events handled by that object. The Object Inspector displays the available properties and events for a selected object. For more information, see "Object Inspector" on page 543.

To remove objects in a layout, select them and press Delete. Alternatively, select the objects and choose Delete (Windows) or Clear (Mac OS) from the Edit menu. The Layout editor removes the selected objects from the layout.

The Layout editor features a contextual menu that conveniently duplicates the commands in the Layout menu. The available commands in the contextual menu depend on the selected item. A sample contextual menu is shown in Figure 13.4.

To display the Layout editor contextual menu:

Right-click an item.

Control-click an item.

The following list describes some common graphical editing commands in the contextual menu:

• Align-displays a submenu from which you can choose different ways to position selected objects.
• Resize-displays a submenu from which you can choose different ways to change the size of selected objects.
• Send To Back-moves the selected objects so that they are displayed behind all other objects.
• Bring To Front-moves the selected objects so that they are displayed in front of all other objects.
• Display Grid-when checked, displays the graphical grid in the layout window.
• Snap To Grid-when checked, the Layout Editor automatically aligns objects with the graphical grid.
• Group-combines selected objects so that they move together as a group.
• Ungroup-separates a selected group so you can move each object independently.
• Properties-displays the Object Inspector to examine the properties of the selected object.

When you create a new layout for your RAD project, as described in "Creating a Layout" on page 519, you select a layout wizard. The wizard helps you complete the layout-creation process. This section describes the following layout wizards:

• Java Frame Wizard

The layout wizards include the following navigation buttons:

• Back-return to the previous step
• Next-proceed to the subsequent step
• Finish-display a summary of current information
• Cancel-discard all changes

You can modify the default settings in each step. To accept all current settings in the wizard, click Finish. The wizard displays a summary of all the current settings for the new project. Click Generate to accept the current settings and create the new layout, or click Cancel to return to the wizard and continue modifying settings.

The Java Frame wizard consists of one step:

1. Describe the frame class for the Java frame.

This section of the wizard, shown in Figure 13.5, lets you specify the class name, package name, and location for the new frame. Other options are available to further describe the frame.

This section includes the following parts:

• Class Name
• Package Name
• Location
• AWT frame
• Swing frame

Enter a name for the frame's class in this field. An example name is provided.

If you wish, you can enter in this field a package for the frame class. A sample package name is provided.

In this field, type a location in which to save the frame class for the new layout. Alternatively, click the button next to the field. A standard window displays. Use the window controls to select a location.

Click this radio button to designate the new frame as an AWT frame. This radio button enabled by default.

Click this radio button to designate the new frame as a Swing frame.

The Component Palette displays graphical tools that represent the components from the current catalog. These tools help you to conveniently build the application's user interface. Choose Component Palette from the Window menu to display the Component Palette, shown in Figure 13.6 (Windows) and Figure 13.7 (Mac OS).

The Component Palette has three main parts:

• Component Palette Toolbar
• Catalog Pop-up Menu
• Component Tools

The Component Palette toolbar provides convenient access to the components detailed in the Component Catalog window. Table 13.1 describes each button in the Component Palette toolbar.

The Component Palette displays component tools from a particular catalog. To use component tools from another catalog, choose the catalog's name from the Catalog pop-up menu, shown in Figure 13.6 (Windows) and Figure 13.7 (Mac OS).

Button	Name	Description
	Open Catalog	Lets you open an additional catalog file and add it to the Component Palette.
	Close Catalog	Closes an added catalog file. The closed catalog is removed from the Component Palette and the Component Catalog window.
	Component Catalog	Opens the Component Catalog window.

The bottom of the Component Palette displays tools from the current catalog. You click a particular tool and then "draw" an object in the layout window. When you finish drawing the object, the Layout editor updates the layout window display. The process is illustrated in Figure 13.8.

To use the Component Palette, do the following:

1. Click the tool representing the component you want to place in the layout window.

If you decide against using the tool you selected, click the Unselect tool. After you click this tool, you can click a different component tool to use in the layout window.

2. Drag the cursor while inside the layout window.

As you drag the cursor, the Layout editor displays a heavy outline to indicate the final position and shape of the component in the layout.

The cursor's icon changes to a crosshair during this step. While you drag the crosshair, a pop-up window displays the layout window's coordinate system. If you decide against using the component tool while dragging the crosshair, press the Esc key. The Layout editor dismisses the component tool and removes the heavy outline from the layout window.

3. Release the outline.

The component is placed in the layout window. You can modify the component's properties and events using the Object Inspector.

For more information about the various component tools in the Component Palette, refer to "RAD Components" on page 549.

The Component Catalog window lets you drag and drop components from the current catalog onto the layout window. You can also view existing catalogs, import additional catalogs, and create new catalogs. Choose Component Catalog from the Window menu to display the Component Catalog window, shown in Figure 13.9.

This section describes the following:

• Component Catalog Toolbar
• Catalog Pane
• Component Pane
• Component Catalog Contextual Menu
• Creating Component Catalogs

The Component Catalog toolbar lets you view and manipulate catalogs and their contents. Table 13.2 describes the buttons in the toolbar.

Button	Name	Description
	New Catalog	Creates a new catalog file to store a customized collection of components
	New Folder	Creates a new folder within your own catalog so you can further organize components
	Open Catalog	Opens a catalog file and adds it to the Catalog pane
	Close Catalog	Closes a catalog file that was added to the Catalog pane
	Import Components	Imports components into the active catalog
	Toggle Index View	Displays or hides the Catalog pane in the Component Catalog window
	Edit Item Properties	Opens the Object Inspector for the selected item so you can edit that item's properties
	Component Palette	Displays the Component Palette and makes it frontmost

The Catalog pane, shown in Figure 13.9 on page 532, displays information about available catalogs, including the customized catalogs you create or import. Click the hierarchical control next to a catalog to expand it and view its contents. Click the control again to collapse the view. Alternatively, double-click an item to expand or collapse its view in the Catalog pane.

You can create customized catalogs to store the components you use most frequently. These customized catalogs make it easier for you to build your application's layouts. To learn how to create your own catalogs, see "Creating Component Catalogs" on page 539.

The Component pane, shown in Figure 13.9 on page 532, displays various information about the items in each catalog. The name of the catalog is displayed in the upper-left corner of the pane. You drag components directly from the Component pane into a layout window to create user interface objects.

The Component pane is discussed in the following topics:

• Content View buttons
• Component Information Bar
• Component list
• Sorting and resizing component lists

The Content View buttons toggle the display of the components in the current catalog:

Click the List View button to display the contents of the Component pane as a list. The List view, shown in Figure 13.10, displays all the components in the current catalog.

Click the Live View button to display the contents of the Component pane as live objects. The Live view, shown in Figure 13.11, is only available for component catalogs that you create. Refer to "Creating Component Catalogs" on page 539 for more information.

The two views in the Component pane help you accomplish different tasks. The List view is useful for quickly browsing a catalog's components. The Live view shows graphical representations of your own catalog's components.

The Live view also helps you create a customized set of components for your application's layouts. For example, you can change the default size and shape of a component in the Live view. When you use the component to create a new interface object in the layout window, the new object retains the size and shape of the component.

The List view of the Component pane includes a Component Information Bar, shown in Figure 13.12. This information bar helps you organize the components in the current catalog.

You can sort the component list according to the columns in the Component Information Bar. You can also resize each column in the list. For more information, see "Sorting and resizing component lists" on page 538.

Table 13.3 details the columns displayed in the Component Information Bar for various catalog types.

Catalog Type	Column	Description
Java catalogs (AWT Components, Swing Components)	Name	The name of the component.
	Class	The class of which the component is a member.
Customized catalogs (created or imported)	Name	The name of the component.
		Identifies whether the component is locked.
	Modified	The date the component was last modified.
	Class	The class of which the component is a member.
	Comments	Shows comments for the component.

The component list, shown in Figure 13.10 on page 535, displays all components in the current catalog and their associated Component Palette button icons. To place a particular component in your layout, drag it from the component list in the Component Catalog window and drop it into the layout window. As you drag the component inside the layout window, a heavy outline indicates the final position of the component. After you release the outline, the component is placed in the layout window.

If you decide against using the component while dragging it in the layout, just drag the component outside the layout window and release it. After releasing the component, you can go back to the component list and drag another component to the layout window.

For more information about removing objects from your layouts, see "Removing objects" on page 523. Refer to "Layout editor contextual menu" on page 525 for more information about contextual menu commands. To learn about the components in the component list, see "RAD Components" on page 549.

You can sort the components in the List view according to the columns in the Component Information Bar, shown in Figure 13.12 on page 536.

Click the column for which you want to sort the components. Each time you click the column, you toggle the sort order between ascending order and descending order. For example, if you want to sort the components by name, click the Name column in the Component Information Bar. Click the column again to sort the components in descending order.

To resize the columns in the Component Information Bar, position the cursor between two column titles. The cursor's icon changes to the icon shown at left. Drag and release this cursor to resize the columns.

The Component Catalog window features a contextual menu that gives you convenient access to several menu commands. The commands displayed in this menu depend on the item you select. A sample contextual menu is shown in Figure 13.13.

To display the Component Catalog contextual menu:

Right-click an item.

Control-click an item, or click and hold on an item.

The following list describes the most common commands in this contextual menu:

• Close-removes the item from the Catalog pane.
• View-changes the current view in the Component pane. You can choose List view or Live view.
• New Folder-creates a new folder in the current catalog.
• Rename-changes the name of the selected item. After you select this command, type a new name for the item and press Enter/Return.
• Lock-locks the selected item. When an item is locked, you cannot change any of its properites (except its "locked" status). However, you can add sub-items to a locked container (such as a folder or catalog), remove sub-items from a locked container, and modify sub-items of a locked container (assuming the items to be modified are not locked). A small lock icon indicates that an item is currently locked.
• Unlock-unlocks the selected item.
• Properties-displays the properties for the selected item in the Object Inspector.

You can create your own customized component catalogs to store the RAD components you use most frequently. These catalogs let you combine components from several catalogs into a single catalog file. Whenever you need to create a new layout, your customized catalog file can provide all the components you need.

To create a catalog, click the New Catalog button in the toolbar of the Component Catalog window. Alternatively, choose New from the File menu, click the File tab at the top of the New window, and then select Component Catalog File in the File view. You see the window shown in Figure 13.14.

Type a name for your new catalog file in the File name field.

The Location field displays the full path to the folder in which the catalog file is saved. To change the current path, type a new path directly into the field. Alternatively, click the Set button to the right of the field to display a dialog box. Use the dialog box controls to navigate to a location on your hard disk where you want to save the project.

When you finish typing a name for the catalog and choosing a location in which to save that catalog, click OK in the New window. The IDE displays the Component Catalog window and adds the new catalog to the Catalog Pane, as shown in Figure 13.15.

To add a component to your new catalog, follow these steps:

1. Select an existing catalog with the component you wish to add.

For example, if you want to add the Java AWT Button component to your catalog, select AWT Components in the Catalog pane.

2. Select the component you wish to add from the Component pane.

In the example, you would select the Button component.

3. Drag and release the selected component onto your catalog.

In the example, you would drag the Button component onto MyCatalog in the Catalog pane, as shown in Figure 13.16. After you release the Button component, it is added to MyCatalog.

You can also add components to your catalog using the Cut, Copy, and Paste commands in the Edit menu and the Layout editor contextual menu. To use these commands, perform the following steps:

1. Select an existing catalog with the component you wish to add.

2. Select the component you wish to add from the Component pane.

3. Choose the Cut or Copy command.

4. Select the catalog to which you want to add the component.

5. Choose the Paste command.

The Object Inspector displays the properties and events for a selected object. You can edit each object characteristic by using pop-up menus, dialog boxes, or by directly typing a new value. Choose Object Inspector from the Window menu to display the Object Inspector, shown in Figure 13.17 (Windows) and (Mac OS, Solaris, and Linux).

This section describes the following Object Inspector parts:

• Object Pop-up Menu
• Properties Tab
• Events Tab
• Object Inspector Contextual Menu

The Object Inspector displays information about the object whose name is displayed in the Object pop-up menu. To inspect other items within the selected object's hierarchy, choose the item's name from the Object pop-up menu.

The arrow keys on the keyboard let you quickly access other objects in the current layout. After clicking the Object pop-up menu, press the Up Arrow key to select the object listed above the current one, or press the Down Arrow key to select the object listed below the current one. Press Enter/Return to confirm the selection and display the object's properties in the Object Inspector.

To view the properties of the selected object, click the Properties tab. The Object Inspector displays a list of applicable properties. Each line in the list displays the name of a property and the current value of that property.

Click the hierarchical control next to a specific property to expand and view its contents. Click the control again to collapse the view. To resize the columns in the list, position the cursor between the columns and drag the cursor. An outline shows the final sizes of the columns. Release the cursor to resize the columns accordingly.

To change the value of a particular property, click its current value. A border is displayed around the line containing the selected property, and the property is highlighted. Type a new value to replace the current one.

Alternatively, you can change the value of a property by clicking buttons displayed next to the current value:

Click this button to display a pop-up menu. Choose pre-defined options from the pop-up menu to change the current property value.

Click this button to display a dialog box. Configure the property value using the options in the dialog box. The current RAD plug-in determines the contents of the dialog box.

If you decide against changing the property's value, press the Esc key on your keyboard. The Object Inspector discards your changes.

The arrow keys on the keyboard provide quick navigation of a component's properties. When a property is currently selected in the Object Inspector, the Up Arrow key selects the property listed above the current one, and the Down Arrow key selects the property listed below the current one.

The Events tab displays information about the selected component's events. By default, all events are disabled. After you modify an event, the RAD tools automatically generate source code. This generated code provides a structured framework to handle the event. You supply the code that determines the way the object behaves and interacts with other objects in your user interface.

To modify a particular event, click its blank text field. The Object Inspector displays and highlights a default name for the event. If you want to change this default name, type a new name.

After you make changes, press Enter/Return to let the RAD tools automatically generate source code. An editor window opens, displays the generated code, and highlights the name you chose for the event. Listing 13.1 shows the generated code for a componentResized event in a Java AWT checkbox component.

public

void checkbox1componentResized(java.awt.event.ComponentEvent e)

{

}

You must supply the code that specifies the component's behavior. For example, the generated code in Listing 13.1 does not include any code inside the braces. You must create the code within these braces in order to control the component's behavior in your application. Choose Save from the File menu or press Ctrl/Command-S to immediately save your changes.

If you decide against modifying an event, press the Esc key on your keyboard. The Object Inspector discards your changes.

The Object Inspector contextual menu provides several convenient commands for manipulating objects. The available commands in this menu depend on the object you select. A sample Object Inspector contextual menu is shown in Figure 13.19.

To display the Object Inspector contextual menu:

Right-click an item.

Control-click an item.

The following list describes some of the commands in the Object Inspector contextual menu:

• Select All-selects the contents of the current text field.
• Delete-removes the contents of the current text field.
• Customize Object-lets you change object characteristics.
• View Alphabetical-changes the Events view so that all object events are listed in alphabetical order, regardless of the groups to which those events belong.
• View In Groups-changes the Events view so that object events are displayed in group hierarchies.